<template>
  <el-card class="box-card">
    <el-form
      ref="form"
      :model="items"
      :rules="rules"
      style="max-width: 800px"
      label-width="80px"
    >
      <el-form-item label="商品名称" prop="title">
        <el-input v-model="items.title"></el-input>
      </el-form-item>
      <el-form-item label="价格" prop="price">
        <el-input-number
          :min="0"
          v-model.number="items.price"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="上下架" prop="onoff">
        <el-switch
          v-model="items.onoff"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="描述" prop="desc">
        <el-input type="textarea" v-model="items.desc"></el-input>
      </el-form-item>
      <el-form-item label="商品封面">
        <!-- 上传文件空间 -->
        <el-upload
          class="upload-demo"
          drag
          action="/api/upload"
          multiple
          :on-error="fileLoadError"
          :on-success = "fileUploaded"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        </el-upload>
        <img :src="items.thumb" width="100" alt="">
      </el-form-item>
      <el-form-item label="商品详情">
        <div id="content" ref="content">
          <quill-editor
          ref="myQuillEditor"
          v-model="items.content"
          :options="editorOption"
        />
        </div>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { fetchItemDetail, updateItems } from '_api'
import { Quill } from 'vue-quill-editor'
import { container, ImageExtend, QuillWatch } from 'quill-image-extend-module'
Quill.register('modules/ImageExtend', ImageExtend)
export default {
  data () {
    // 自定义验证规则
    /*   const rule111 = (rule, value, callback) => {
      // 必须输入 小明 否则报错
      if (value !== '小明') {
        return callback(new Error('输入的名字不是小明'))
      } else {
        // 验证通过
        return callback()
      }
    } */
    return {
      // 富文本绑定的内容

      editorOption: {
        scrollingContainer: '#content',
        modules: {
          ImageExtend: {
            loading: true,
            name: 'img',
            action: '/api/upload',
            response: (res) => {
              console.log(res)
              // return返回成功的图片地址
              return res.data.url
            }
          },
          toolbar: {
            container: container,
            handlers: {
              image: function () {
                QuillWatch.emit(this.quill.id)
              }
            }
          }
        }
      },
      // 是否需要封面图片
      needThumb: false,
      // 需要封面 且上传成功的状态
      uploadSuccess: false,
      items: {
        title: '',
        price: 0,
        thumb: '',
        onoff: 1,
        desc: '',
        content: ''
      },
      // 自定义一个验证规则
      // 表单验证规则
      rules: {
        title: [
          /* {
            validator: rule111,
            trigger: 'blur'
          }, */
          {
            required: true,
            message: '商品名称必须填写',
            trigger: 'blur'
          }
        ],
        price: [
          {
            required: true,
            message: '价格必填不能小于0'
          }
        ]
      }
    }
  },
  methods: {
    fetchItemDetail () {
      // 获取要更新的商品详情
      fetchItemDetail(this.$route.query.id).then(res => {
        if (res.data.code === 200) {
          this.items = res.data.data
        }
      })
    },
    fileLoadError () {
      // 图片上传失败
      this.$message({
        type: 'error',
        message: '上传失败'
      })
    },
    fileUploaded (res) {
      // 图片上传成功
      this.$message({
        type: 'success',
        message: '上传成功'
      })
      // 将 返回图片地址 添加到上传的参数中
      this.items.thumb = res.data.url
    },
    onSubmit () {
      // 提交表单
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 更新
          updateItems({ ...this.items }).then(res => {
            if (res.data.code === 200) {
              this.$message({
                type: 'success',
                message: res.data.msg,
                duration: 2000,
                onClose: () => {
                  this.$router.replace('/itemLists')
                }
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  },
  created () {
    this.fetchItemDetail()
  }
}
</script>

<style lang="scss" scoped>
#content{
  width: 100%;
  height: 400px;
  overflow-y: auto;
  .quill-editor{
    width: 100%;
    height: 400px;
  }
}
</style>
